{# used by the application layout example #}

<div class="p-side-navigation--icons" id="drawer-icons">
  <nav aria-label="Main">
    <ul class="p-side-navigation__list">
      <li class="p-side-navigation__item--title">
        <a class="p-side-navigation__link" href="#"><span class="p-side-navigation__label">Title that is a link</span></a>
      </li>
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#"><i class="p-icon--information {% if is_dark %}is-light{% endif %} p-side-navigation__icon"></i><span class="p-side-navigation__label"><span class="p-side-navigation__label">First level link</span></a>
      </li>
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#"><i class="p-icon--help {% if is_dark %}is-light{% endif %} p-side-navigation__icon"></i><span class="p-side-navigation__label">First level link with status</span><div class="p-side-navigation__status"><i class="p-icon--error {% if is_dark %}is-light{% endif %}"></i></div></a>
      </li>
      <li class="p-side-navigation__item has-active-child">
        <a class="p-side-navigation__link" href="#"><i class="p-icon--user {% if is_dark %}is-light{% endif %} p-side-navigation__icon"></i><span class="p-side-navigation__label">Link with children</span></a>
        <ul class="p-side-navigation__list">
          <li class="p-side-navigation__item">
            <a class="p-side-navigation__link" href="#"><span class="p-side-navigation__label">Second level link</span><div class="p-side-navigation__status"><i class="p-icon--warning {% if is_dark %}is-light{% endif %}"></i></div></a>
          </li>
          <li class="p-side-navigation__item">
            <span class="p-side-navigation__text"><span class="p-side-navigation__label">Second level text</span></span>
          </li>
          <li class="p-side-navigation__item">
            <a class="p-side-navigation__link" href="#"><span class="p-side-navigation__label">Second level link with children</span></a>
            <ul class="p-side-navigation__list">
              <li class="p-side-navigation__item">
                <span class="p-side-navigation__text"><span class="p-side-navigation__label">Third level text</span></span>
              </li>
              <li class="p-side-navigation__item">
                <a class="p-side-navigation__link" href="#"><span class="u-truncate p-side-navigation__label">Third level link with label that is truncated because it's long long long long long</span><div class="p-side-navigation__status">
                  <span class="p-chip--caution is-readonly is-inline is-dense">In progress</span>
                </div></a>
              </li>
              <li class="p-side-navigation__item">
                <a class="p-side-navigation__link" aria-current="page" href="#"><span class="p-side-navigation__label">Third level active link</span></a>
              </li>
              <li class="p-side-navigation__item">
                <a class="p-side-navigation__link" href="#"><span class="p-side-navigation__label">Third level link with status</span><div class="p-side-navigation__status"><i class="p-icon--success {% if is_dark %}is-light{% endif %}"></i></div></a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="p-side-navigation__item">
        <span class="p-side-navigation__text"><i class="p-icon--collapse {% if is_dark %}is-light{% endif %} p-side-navigation__icon"></i><span class="p-side-navigation__label">First level item that is not a link</span></span>
      </li>
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#"><span class="p-side-navigation__label">First level link with a label</span><div class="p-side-navigation__status">
          <span class="p-chip--positive is-readonly is-inline is-dense">New</span>
        </div></a>
      </li>
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#"><i class="p-icon--search {% if is_dark %}is-light{% endif %} p-side-navigation__icon"></i><span class="p-side-navigation__label">First level link with a label is long and wraps wraps wraps wraps wraps wraps</span><div class="p-side-navigation__status">
          <span class="p-chip--information is-readonly is-inline is-dense">Updated</span>
        </div></a>
      </li>
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#"><span class="u-truncate p-side-navigation__label">First level link with label that is truncated because it's long long long long long long long</span><div class="p-side-navigation__status">
          <span class="p-chip--information is-readonly is-inline is-dense">Validated</span>
        </div></a>
      </li>
    </ul>
    <ul class="p-side-navigation__list is-fading-when-collapsed">
      <li class="p-side-navigation__item--title">
        <span class="p-side-navigation__text">Title that is not a link</span>
      </li>
      <li class="p-side-navigation__item">
        <span class="p-side-navigation__text">First level text</span>
      </li>
      <li class="p-side-navigation__item">
        <span class="p-side-navigation__text">Text item with children</span>
        <ul class="p-side-navigation__list">
          <li class="p-side-navigation__item">
            <a class="p-side-navigation__link" href="#">Second level link</a>
          </li>
          <li class="p-side-navigation__item">
            <span class="p-side-navigation__text">Second level text</span>
          </li>
          <li class="p-side-navigation__item">
            <span class="p-side-navigation__text">Second level text with children</span>
            <ul class="p-side-navigation__list">
              <li class="p-side-navigation__item">
                <span class="p-side-navigation__text">Third level text</span>
              </li>
              <li class="p-side-navigation__item">
                <a class="p-side-navigation__link is-active" href="#">Third level active item that is long and wraps wraps wraps wraps wraps wraps</a>
              </li>
              <li class="p-side-navigation__item">
                <a class="p-side-navigation__link" href="#"><span class="u-truncate">Third level link that is truncated because it's long long long long long long long</span></a>
              </li>
              <li class="p-side-navigation__item">
                <a class="p-side-navigation__link" href="#">Third level link</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="p-side-navigation__item">
        <span class="p-side-navigation__text">First level item that is not a link</span>
      </li>
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#">First level link</a>
      </li>
    </ul>
  </nav>
  </div>
